<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>html5之localstorge</title>
    <link rel="stylesheet" href="./style.css">
    <!-- 职责分离 git -->
</head>
<body>
    <div class="wrapper">
        <h2>LOCAL TAPAS</h2>
        <p></p>
        <ul class="plates">
            <li>Loading Tapas</li>
        </ul>
        <form class="add-items">
            <input type = "text" name="item" autofocus placeholder="item name" required>
            <input type ="submit" value="+add-item">
        </form>
    </div>
      <script>
// 1.tolist
// 2.loading ...?
// 3. 前端的数据持久化  前端有数据库 5M 
//console.log(a);// undefined  声明提升了，但值没有
//var a = 1;
 const addItems = document.querySelector('.add-items');// 性能
 const itemlist = document.querySelector('.plates');
 const items = JSON.parse(localStorage.getItem("items")) || [];
 // es6 参数默认值
   function populatelist(plates=[],plateslist) {
     plateslist.innerHTML = plates.map((plate,i)=> `
     <li>
                <input type="checkbox" data-index=${i} id="item${i}" 
                ${plate.done? 'checked': ''} />
                <label for="item${i}">${plate.text}</label>
            </li>
                `).join('')
 }
 function addItem(event){
   event.preventDefault();
   const text = this.querySelector('[name=item]').value.trim();
   const item = {// 新建未完成的对象
       text,// ES6对象省略写法
       done:false
   }
   items.push(item)
   populatelist(items,itemlist);
   // storages
   // items
   //console.log(items)
   console.log(JSON.stringify(items));
   localStorage.setItem('item',JSON.stringify(items))
   this.reset();
}
//    function init() {
//        // 取出localstroage
//        // [].length >0
//        // populatelist
//        const storagesItem = JSON.parse(
//            localStorage.getItem("items")
//        );
//        if(storagesItem.length) {
//           // items = [...storagesItem];
//         //   for(let item of storagesItem) {
//         //       items.push(item)
//         //   }
//            populatelist(storagesItem,itemlist);
//        }
//    populatelist(items,itemlist);
// //    itemslist.innerHTML = items.map(item=>`
// //    <li>
// //     <label>${item.text}</label>
// //     </li>`
// //    ).join('')
// }
addItems.addEventListener('submit', addItem);
  populatelist(items,itemlist)
</script>
</body>
</html>